<template>
  <el-dialog
    title="添加古诗词"
    :visible="addPoetryVisible"
    @update:visible="v=>$emit('update:addPoetryVisible',false)"
  >
    <el-form>
      <el-form-item :label="'诗词标题: '">
        <el-input type="text" v-model="poetryForm.poetryTitle" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :label="' 诗 人 : '">
        <el-input type="text" v-model="poetryForm.poetryPote" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="诗词年代: ">
        <el-select v-model="poetryForm.poetryDynasty" width="80px" placeholder="请选择">
          <el-option
            v-for="item in allpoetryDynasty"
            :key="item.id"
            :label="item.poetryDynasty"
            :value="item.poetryDynasty"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="诗词类型: ">
        <el-select v-model="poetryForm.poetryType" placeholder="请选择">
          <el-option
            v-for="item in allPoetryType"
            :key="item.id"
            :label="item.poetryType"
            :value="item.poetryType"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="'诗词内容: '">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入诗词内容"
          v-model="poetryForm.poetryContnent"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:addPoetryVisible',false)">取 消</el-button>
      <el-button type="primary" @click="submitPoetry">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "addPoetry",
  props: {
    addPoetryVisible: {
      type: Boolean,
      default: false
    },
    poetryInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      poetryForm: {
        poetryTitle: "", //诗词标题
        poetryPote: "", //诗人
        poetryType: "", //诗词类型
        poetryDynasty: "", //诗词年代
        poetryContnent: "" //诗词内容
      },
      //诗词类型
      allPoetryType: [
        { id: 1, poetryType: "田园" },
        { id: 2, poetryType: "送别" },
        { id: 3, poetryType: "山水" },
        { id: 4, poetryType: "爱情" },
        { id: 5, poetryType: "励志" },
        { id: 6, poetryType: "边塞" },
        { id: 7, poetryType: "爱国" },
        { id: 8, poetryType: "怀古" },
        { id: 9, poetryType: "思乡" }
      ],
      //诗词年代
      allpoetryDynasty: [
        { id: 8, poetryDynasty: "先秦" },
        { id: 9, poetryDynasty: "魏晋" },
        { id: 10, poetryDynasty: "汉" },
        { id: 1, poetryDynasty: "南北朝" },
        { id: 3, poetryDynasty: "唐" },
        { id: 4, poetryDynasty: "宋" },
        { id: 5, poetryDynasty: "元" },
        { id: 6, poetryDynasty: "明" },
        { id: 7, poetryDynasty: "清" }
      ]
    };
  },
  methods: {
    //提交商品类型表单数据
    submitPoetry() {
      //如果传入诗词信息id,就是修改
      if (this.poetryInfo._id) {
        let arrPoetryContnent = this.poetryForm.poetryContnent;
        this.poetryInfo.poetryContnent = arrPoetryContnent.split("。");
        this.$store.dispatch("putPoetry", this.poetryForm).then(res => {
          if (res.ok === 1) {
            this.$emit("update:addPoetryVisible", false);
            this.$store.dispatch("getPoetryList");
            this.$message({
              message: "修改成功",
              type: "success"
            });
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error"
            });
          }
        });
      } else {
        //增加诗词
        let arrPoetryContnent = this.poetryForm.poetryContnent;
        this.poetryForm.poetryContnent = arrPoetryContnent.split("。");
        this.$store.dispatch("addPoetry", this.poetryForm).then(res => {
          if (res.ok === 1) {
            this.$emit("update:addPoetryVisible", false);
            this.$store.dispatch("getPoetryList");
            this.$message({
              message: "添加成功",
              type: "success"
            });
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error"
            });
          }
        });
      }
    }
  },
  mounted() {
    if (this.poetryInfo._id) {
      this.poetryInfo.poetryContnent = this.poetryInfo.poetryContnent.join(
        "。"
      );
      this.poetryForm = this.poetryInfo;
    }
  },
  //防止诗歌内容变为字符串直接渲染
  beforeDestroy() {
    let arrPoetryContnent = this.poetryInfo.poetryContnent;
    if (typeof arrPoetryContnent === "string") {
      this.poetryInfo.poetryContnent = arrPoetryContnent.split("。");
    }
  }
};
</script>

